<template>
  <div class="brands-box">
    <!-- title-heading -->
    <heading-title title="Brands" />
    <!-- point-list -->
    <ul class="point-list-container">
      <li
        v-for="item in pointList"
        :key="item.index"
        @click="pointClick(item.index)"
      >
        {{ item.name }}
      </li>
    </ul>
    <!-- list -->
    <div class="point-position" v-for="item in pointList" :key="item.index">
      <div class="left-box">
        {{ item.name }}
      </div>
      <div class="right-box">
        <ul>
          <li v-for="(point, j) in item.list" :key="j" @click="brandsClick(point.name)">
            {{ point.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { POINTLIST } from "@/utils/dictionaries";
import { anchorJump } from "@/utils/scroll-to";
export default {
  components: {
    HeadingTitle: () => import("_c/HeadingTitle")
  },
  data() {
    return {
      pointList: POINTLIST
    };
  },

  methods: {
    pointClick(idx) {
      anchorJump(idx, "point-position");
    },
		brandsClick(name) {
			this.$router.push({ path: "/product", query: { title: name} });
		}
  }
};
</script>
<style lang="scss" scoped>
.brands-box {
  ul.point-list-container {
    margin: 0;
    padding: 10px 0;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    li {
      list-style: none;
      margin-right: 20px;
      font-weight: 600;
      cursor: pointer;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .point-position {
    display: flex;
    font-size: 32px;
    color: #1a1a1a;
    margin-bottom: 50px;
    padding-left: 20px;
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .left-box {
      width: 25%;
    }
    .right-box {
      li {
        cursor: pointer;
      }
    }
  }
}
</style>
